<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 很多柱形图
 * @LastEditTime: 2021-11-29 16:02:03
 * @FilePath: \tianjushi-kanban\src\components\charts\ManyBars.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "Y标题",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: {
        xData: ["1月", "2月"],
        yData: [
          {name:'name1',value: [200, 300, 400, 200, 300]},
          {name:'name2',value: [10, 300, 400, 200, 300]},
          {name:'name3',value: [10, 300, 400, 200, 300]}, 
        ],
      },
    },
    color: {
      default: [
        ["#4facfe", "#00f2fe"],
        ["#43e97b", "#38f9d7"],
        ["#fa709a", "#fee140"],
      ],
      type: Array,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    barGap: {
      default: 1,
      type: Number,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {

      let serdatas = [] ;
      props.chartdata.yData.forEach((v,index)=>{
        serdatas.push({
            name: v.name,
            type: "bar",
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                // color:'#1BC85E',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: props.color[index][0],
                  },
                  {
                    offset: 1,
                    color: props.color[index][1],
                  },
                ]),
                //  barBorderRadius: [8,8,0,0],
                /*信息显示方式*/
                label: {
                  textStyle: {
                    fontSize: props.fontSize, //更改坐标轴文字大小
                  },
                  show: true,
                  position: "top",
                  formatter: "{c}"+props.unit,
                  color: props.color[index][0],
                },
              },
            },
           // barWidth: props.barWidth,
             barGap: props.barGap,
            data: v.value,
          })
      }) 
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "60",
          right: "40",
          bottom: "30",
        },
        legend: {
          data: props.chartdata.title,
          textStyle: {
            color: "#ffffff",
            fontSize: props.fontSize,
          },
        },
        xAxis: [
          {
            type: "category",
            data: props.chartdata.xData,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            name: props.title,
            min: 0,
            // max: 40,
            scale: true,
            nameTextStyle: {
              fontSize: props.fontSize,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
            //坐标轴内线的样式
            splitLine: {
              lineStyle: {
                color: "#dedede",
                type: "dashed", //虚线
              },
            },
          },
        ], 
        series: serdatas,
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>